<template>
  <div>
    <div style="width:100%"
         id="all"
         ref="print">
      <div id="programme"
           style="width:710px;margin:auto;page-break-after: always;"
           v-show="coverVisible">
        <coverTemplate></coverTemplate>
      </div>
      <div style="width:790px;margin:auto;page-break-after: always;"
           v-show="allVisible">
        <jbxxTemplate></jbxxTemplate>
      </div>
      <div style="width:790px;margin:auto;page-break-after: always;"
           v-show="jktjVisible">
        <jktjCoverTemplate></jktjCoverTemplate>
      </div>
      <div style="width:790px;margin:auto;page-break-after: always;"
           v-show="allVisible">
        <jktjTemplate></jktjTemplate>
      </div>
      <!-- <div style="width:790px;margin:auto;page-break-after: always;" v-show="jktjVisible">
        <jktjFirstTemplate></jktjFirstTemplate>
      </div> -->
      <div style="width:790px;margin:auto;page-break-after: always;"
           v-show="allVisible">
        <oldShzlnlTemplate></oldShzlnlTemplate>
      </div>
      <div style="width:790px;margin:auto;page-break-after: always;"
           v-show="allVisible||jktjVisible">
        <xcgctTemplate></xcgctTemplate>
      </div>
      <div style="width:790px;margin:auto;page-break-after: always;"
           v-show="allVisible||jktjVisible">
        <shctTemplate></shctTemplate>
      </div>
      <!-- <div style="width:790px;margin:auto;page-break-after: always;"
           v-show="allVisible||jktjVisible">
        <ncgctTemplate></ncgctTemplate>
      </div> -->
      <div style="width:790px;margin:auto;page-break-after: always;"
           v-show="allVisible||jktjVisible">
        <xdtTemplate></xdtTemplate>
      </div>
      <div style="width:790px;margin:auto;page-break-after: always;"
           v-show="allVisible||jktjVisible">
        <colorTemplate></colorTemplate>
      </div>

    </div>
    <div class="error500-btn-con"
         style="text-align:center">
      <el-button @click="printAll"
                 style="width: 200px;margin-top:10px"
                 type='primary'>打印居民健康档案</el-button>
      <el-button @click="printJktj"
                 style="width: 200px;margin-top:10px"
                 type='primary'>打印健康查体报告</el-button>
      <el-button @click="printZytz"
                 style="width: 200px;margin-top:10px"
                 type='primary'>打印中医体质报告</el-button>
      <el-button @click="myprint"
                 style="width: 200px;margin-top:10px"
                 type='primary'>打印当前页面</el-button>
    </div>
  </div>

</template>
<script>
import '@/styles/report.scss'
import html2canvas from 'html2canvas'
import coverTemplate from './coverTemplate'
import jbxxTemplate from './jbxxTemplate'
import colorTemplate from './colorTemplate'
import jktjTemplate from './jktjTemplate'
import jktjFirstTemplate from './jktjFirstTemplate'
import oldShzlnlTemplate from './oldShzlnlTemplate'
import xcgctTemplate from './xcgctTemplate'
import shctTemplate from './shctTemplate'
import ncgctTemplate from './ncgctTemplate'
import jktjCoverTemplate from './jktjCoverTemplate'

import xdtTemplate from './xdt'
import { getObj } from '@/api/cust/health/jkdn'
export default {
  components: {
    shctTemplate,
    coverTemplate,
    jbxxTemplate,
    oldShzlnlTemplate,
    jktjTemplate,
    xcgctTemplate,
    colorTemplate,
    xdtTemplate,
    ncgctTemplate,
    jktjCoverTemplate,
    jktjFirstTemplate
  },
  data () {
    return {
      loading: false,
      id: null,
      grjbxxid: null,
      allVisible: false,
      jktjVisible: false,
      coverVisible: true,
      form: {
        id: null,
        name: '',
        jkdnxzz: '',
        jkdnhjdz: '',
        lxdh: '',
        xzjdmc: '',
        cwhmc: '',
        jddw: '',
        jdr: '',
        zeys: '',
        jdrq: ''
      }
    }
  },
  created () {
    this.grjbxxid = this.$route.query.grjbxxid
    this.id = this.$route.query.id
    if (!this.validatenull(this.id)) {
      this.getData()
    }
    this.allVisible = false
  },
  mounted () { },
  methods: {
    getData () {
      getObj(this.id).then(res => {
        this.form = res.data
      })
    },
    myprint () {
      this.loading = true
      // this.$message.success('后台正在打包,请稍候。。。')
      // var dom = document.getElementById('programme')
      // dom.border = '0'
      // html2canvas(dom).then(canvas => {
      //   const url = canvas.toDataURL()
      //   var newstr = `<img src="${url}" width="90%"/>`
      //   var tab = window.open('', '打印')
      //   tab.document.open()
      //   tab.document.write(newstr)
      //   setTimeout(() => {
      //     tab.window.print()
      //     tab.close()
      //     this.loading = false
      //     dom.border = '1'
      //   }, 0)
      // })
      this.$print(this.$refs.print)
      this.loading = false
    },
    printAll () {
      this.allVisible = true
      setTimeout(() => {
        this.$print(this.$refs.print) // 使用
        this.allVisible = false
      }, 1500)
    },
    printJktj () {
      this.jktjVisible = true
      this.coverVisible = false
      setTimeout(() => {
        this.$print(this.$refs.print) // 使用
        this.jktjVisible = false
        this.coverVisible = true
      }, 1500)
    },
    printZytz () {
      this.$router.push({
        path: `/cust/report/zyyjkgl`,
        query: this.$router.query
      })
    },
    breaks () { }
  },
  computed: {}
}
</script>

  